<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			html {
				height:100% ;
			}
			body {
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
			}
			.box {
				width: 200px;
				height: 200px;
				border: 15px solid #FF6700;
				/* transition:  height 2s,width 4s; */

			}
			.box1 {
				width: 200px;
				height: 200px;
				border: 15px solid #FF6700;
				/* transition:  height 2s,width 4s; */
				/* transition-property: all;
				transition-duration:  2s;
				transition-timing-function:linear;
				transition-delay: 3s; */
				transition:all 2s 3s linear;
			}
			body:hover .box {
				transform: translateX(500px);
				transition-property: transform;
				transition-duration:  2s;
				transition-timing-function:linear ;
			}
			body:hover .box1 {
				transform: translateX(500px);
			}
		</style>
	</head>
	<body>
		<div class="box"></div>
		<div class="box1"></div>
	</body>
</html>
